<template>
  <div class="roles-add">
    <component-form :data="form" :width="80">
      <slot slot="scheduleRadio">
        <el-radio-group v-model="form.formFields.hasSchedule">
          <el-radio :label="0">没有日程</el-radio>
          <el-radio :label="1">拥有日程</el-radio>
        </el-radio-group>
      </slot>
      <template slot="formItem">
        <el-tree ref="tree" :data="permissionsTree" show-checkbox node-key="id"
                 :default-expanded-keys="[2]"
                 :default-checked-keys="[5]"
                 :props="defaultProps"
                 @check="getChecked">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <el-tag v-if='node.level==1' size="mini">目录</el-tag>
                        <el-tag v-if='node.level==2' type="success" size="mini">菜单</el-tag>
                        <el-tag v-if='node.level==3' type="warning" size="mini">按钮</el-tag>
                    </span>
        </el-tree>
      </template>
    </component-form>
  </div>
</template>
<script>
  import {add} from '@/api/sys/roles'
  import {getPermissionsTree} from '@/api/sys/menus'

  export default {
    name: 'roles-add',
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        permissionsTree: [],
        form: {
          labelWidth: '200px',
          formFields: {
            name: '',
            hasSchedule: 0,
            description: '',
            status: 1,
            permissionsIds: []
          },
          formLabel: [
            {prop: 'name', title: '角色名称', type: 'input', width: '80%', placeholder: '请输入角色名称'},
            {prop: 'hasSchedule', title: '是否有日程', type: 'slot', slot: 'scheduleRadio'},
            {prop: 'description', title: '角色描述', type: 'input', width: '80%', placeholder: '请输入角色描述'},
            {prop: 'permissionsIds', title: '选择权限', type: 'slot', slot: 'formItem'},
          ],
          buttons: {
            options: [
              {
                title: '提交', type: 'primary', loading: false, click: (form, item) => {
                  this.handleSubmit(add, form, this, data => this.$emit('handleGetTableData'), true);
                }
              },
            ]
          },
          rules: {
            id: [
              {required: true},
            ],
            name: [
              {required: true, message: '请输入角色名称', trigger: 'blur'},
              {min: 1, max: 20, message: '长度在 20 个字符内', trigger: 'blur'}
            ],
            permissionsIds: [
              {required: true, message: '请输入选择权限', trigger: 'blur'},
            ]
          }
        },
      }
    },
    created() {
      this.$nextTick(() => this.request(getPermissionsTree, {}, this, data => this.permissionsTree = data, false));
    },
    methods: {
      change(val) {
        this.form.pid = val;
      },
      getChecked() {
        this.form.formFields.permissionsIds = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      }
    }
  }
</script>
<style lang="css" scoped>

</style>